<!doctype html>
<html class="no-js fixed-layout">
<head>
<% include("/common/shop_head.html"){}%>
<script type="text/javascript">
$().ready( function() {
  // 删除
  $(".deleteMessage").click( function() {
    Modal.register(['confirm','alert']);
	Modal.confirm("您确定要删除吗？",{
	  relatedTarget: this,
      onConfirm: function(options) {
	    location.href="${base}/shop/message/delete?id=" + $(this.relatedTarget).data('id');
	  }
    });
  });
	
  // 显示消息内容
  $(".showMessageContent").click( function() {
    var $this = $(this);
	var $messageContentTr = $this.parent().parent().next(".messageContentTr");
	//标记为已读
	var id = $(this).data('id');
	if(id){
	  $.ajax({
	    url: "${base}/shop/message/ajaxMessageContent",
	    data: {"id": id},
	    async: false,
		dataType: "json",
		beforeSend: function(data) {
		  $messageContentTr.find("td").html('<span class="am-icon-rotate-right"> </span> 加载中...');
		},
		success: function(data) {
		  if (data.status == "success") {
		    $messageContentTr.find("td").html(data.content);
		    $this.parent().next().next().html("是");
		  } else {
			$.message(data.status, data.message);
		  }
		}
	  });
	}
	var $showMessageContentIcon = $this.prev("span");
	if ($showMessageContentIcon.hasClass("am-icon-caret-down")) {
	  $messageContentTr.show();
	  $showMessageContentIcon.removeClass("am-icon-caret-down").addClass("am-icon-caret-up");
	} else {
	  $messageContentTr.hide();
	  $showMessageContentIcon.removeClass("am-icon-caret-up").addClass("am-icon-caret-down");
	}
  });
});
</script>
</head>
<body>
<%include("/shop/header.html"){}%>
<div class="am-cf shop-main">
  <!-- sidebar start -->
  <%include("/shop/sidebar.html"){}%>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li><span class="am-icon-comment am-icon-fw"> </span>我的消息</li>
        <li class="am-active">收件箱</li>
      </ol>
      <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
        <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
          <table class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
            <thead>
              <tr>
                <th>标题</th>
			    <th>发件人</th>
			    <th>已读</th>
			    <th>时间</th>
			    <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <%for(list in pager.list){%>
			  <tr>
			    <td>
				  <span class="am-icon-caret-down"> </span><a class="showMessageContent" <%if (!list.isRead){%>data-id="${list.id}"<%}%> href="javascript: void(0);">${list.title}</a>
				</td>
				<td>
				  ${list.fromMember.username!"<span class=\"am-text-warning\">管理员</span>"}
				</td>
				<td>
				  <%if (list.isRead){%>
				  是
				  <%}else{%>
				  <span class="am-text-danger">否</span>
				  <%}%>
				</td>
				<td>
				  ${list.createDate,dateFormat="yyyy-MM-dd HH:mm:ss"}
				</td>
				<td>
				  <a href="${base}/shop/message/reply?id=${list.id}" class="am-badge am-badge-secondary">回复</a>
                  <a data-id="${list.id}" href="javascript:void(0);" class="deleteMessage am-badge am-badge-danger">删除</a>
				</td>
			  </tr>
			  <tr class="messageContentTr" style="display:none;">
			    <td colspan="5" class="am-padding-left">${list.content!'没有任何消息'}</td>
			  </tr>
			  <%}%>
            </tbody>
          </table>
          <%if (pager.list.~size == 0){%>
          <div class="am-kai am-text-center am-margin">
            <h3>没有找到任何记录!</h3>
          </div>
          <%}%>
        </div>
      </div>
      <%include("/shop/pager.html", {"pageNumber":pager.pageNumber,"pageSize":pager.pageSize,"pageCount":pager.totalPage,"property":"","keyword":"无","orderBy":"","orderType":"","baseUrl":"/shop/message/inbox"}) {}%>
    </div>
    <%include("/shop/footer.html"){}%>
  </div>
  <!-- content end -->
</div>
</body>
</html>